<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><META content="IE=11.0000" http-equiv="X-UA-Compatible">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后台登录</title>
    <link rel="stylesheet" href="resource/css/style02.css">
    <script src="resource/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <meta name="GENERATOR" content="MSHTML 11.00.9600.17496"></head>
<body>
<nav style="background-color: #88a6c0;height: 70px;">
    <div class="nav-wrapper" style="margin: 0 auto; text-align: center;">
        <img src="resource/images/logo.png" alt="logo" style="height: 70px;" />
    </div>
</nav>

<div class="top_div"></div>
<div style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 200px; text-align: center;">
    <div style="width: 165px; height: 96px; position: absolute;">
        <div class="tou"></div>
        <div class="initial_left_hand" id="left_hand"></div>
        <div class="initial_right_hand" id="right_hand"></div>
    </div>
    <form class="bs-example bs-example-form" action="adlogin.do" method="post" role="form">

        <p style="padding: 30px 0px 10px; position: relative;">
            <span class="u_logo" style="left: 65px;"></span>
            <input class="ipt" type="text" name="adminname" placeholder="请输入管理员账号" value="">
        </p>
        <P style="position: relative;">
            <span class="p_logo"style="left: 65px;"></span>
            <input class="ipt" id="password" name="adminpwd" type="password" placeholder="请输入密码" value="">
        </P>
        <div style="height: 50px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
            <p style="margin: 0px 35px 20px 45px;">
            <span style="text-align: center;width: 100px;">
                 <button class="btn waves-effect waves-light" type="submit" name="action" style="background-color: rgb(70,130,180);font-size: 20px;width: 200px;">
                登录
                </button>
           </span>
            </p>
        </div>
    </form>
</div>
<div style="text-align:center;"></div>

<script type="text/javascript">
    $(function(){
        //得到焦点
        $("#password").focus(function(){
            $("#left_hand").animate({
                left: "150",
                top: " -38"
            },{step: function(){
                    if(parseInt($("#left_hand").css("left"))>140){
                        $("#left_hand").attr("class","left_hand");
                    }
                }}, 2000);
            $("#right_hand").animate({
                right: "-64",
                top: "-38px"
            },{step: function(){
                    if(parseInt($("#right_hand").css("right"))> -70){
                        $("#right_hand").attr("class","right_hand");
                    }
                }}, 2000);
        });
        //失去焦点
        $("#password").blur(function(){
            $("#left_hand").attr("class","initial_left_hand");
            $("#left_hand").attr("style","left:100px;top:-12px;");
            $("#right_hand").attr("class","initial_right_hand");
            $("#right_hand").attr("style","right:-112px;top:-12px");
        });
    });
</script>

</body>
</html>
